footer,
nav {
  background: #3c3c3c;
}

nav {
  height: 50px;

  img {
    height: 50px;
    margin-left: 20px;
  }
}

.main-content {
  margin-top: 50px;
  min-height: calc(100vh - 102px);
  padding: 20px 70px;
}

@media (width <= 575px) {
  .main-content {
    min-height: calc(100vh - 144px);
  }
}

@media (width >= 576px) and (width <= 589px) {
  .main-content {
    min-height: calc(100vh - 123px);
  }
}

.footer {
  padding: 5px 70px;
  color: rgb(255 255 255 / 75%);

  a {
    &:hover {
      filter: brightness(150%);
    }
  }
}

.container {
  max-width: 1350px;
}

.dropdown-item {
  color: rgb(255 255 255 / 75%);

  &:hover,
  &:focus {
    background-color: inherit;
    color: white;
  }
}

.navbar-nav li {
  margin: auto 0;
  margin-left: 10px;
}

.navbar {
  padding: 0 80px;
  z-index: 1000;
}

.nav-link {
  cursor: pointer;
}

.pull-right {
  margin-right: 20px;
}

@media (width <= 1024px) {
  .navbar {
    padding: 0 30px;
  }

  .main-content {
    padding: 20px 50px;
  }

  .footer {
    padding: 5px 30px;
  }
}

@media (width <= 991px) {
  .navbar-nav li {
    margin: auto 20px;
  }

  .pull-right {
    margin-right: 0;
  }
}

@media (width <= 768px) {
  .navbar {
    padding: 0;
  }

  .main-content {
    padding: 10px 15px;
  }

  .footer {
    padding: 5px 15px;
  }
}

.navbar-toggler {
  margin-right: 20px;

  &:focus {
    outline: none;
  }
}

.navbar-collapse,
.dropdown-menu {
  background: #3c3c3c;
  min-width: 0;
}

.dropdown-divider {
  border: 1px solid rgb(255 255 255 / 50%);
  margin: 0.5rem 15px;
}

.dropdown-menu-right {
  margin-bottom: 0.5rem;
}

button.bg-transparent.btn.btn-link.nav-link:active {
  color: white !important;
}
